<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 600px;height:400px;"></div>

<script>
	var names=[];
	var scores=[];
	var page=4;
	var pageSize=5;
	
	$(function(){
		$.ajax({
			url:"http://localhost:8080/student/queryByPage",
			type:"post",
			dataType:"json",
			data:{
				page:page,
				pageSize:pageSize
			},success:function(students){
				for(var i=0; i<students.length;i++){
					names[i] = students[i].studentName;
					scores[i]= students[i].studentScore;
				}
				drawPic();
			}
		});
	});
	
	function drawPic(){
		var myChart = echarts.init(document.getElementById('main'));
		option = {
		    xAxis: {
		        type: 'category',
		        data: names
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: [{
		        data: scores,
		        type: 'line'
		    }]
		};
		myChart.setOption(option);
	}
</script>

</body>
</html>